<form class="form-horizontal" role="form" id="form">
    <div class="row">
        <div class="col-md-12">
            <h3 class="header smaller lighter blue">
                逾期情况
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <table id="repaymentScheduleTable" class="table table-striped table-bordered table-hover" width="100%">
                <thead>
                <tr>
                    <th class="center">计划还款日</th>
                    <th class="center">期初余额（元）</th>
                    <th class="center">当期应还（元）</th>
                    <th class="center">应还本金（元）</th>
                    <th class="center">应还利息（元）</th>
                    <th class="center">期末余额（元）</th>
                    <th class="center">状态</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div><!-- /.span -->
    </div>
</form>

<script src="/js/jquery.validate.min.js"></script>
<script src="/js/messages_zh.js"></script>
<script src="/js/common/form.js"></script>

<script>
    $(document).ready(function() {
        $('#repaymentScheduleTable').DataTable( {
            "processing": true,
            "lengthChange": false,
            "filter": false,
            //开启服务器模式
            //serverSide: true,
            //数据来源（包括处理分页，排序，过滤） ，即url，action，接口，等等
            ajax: '/biz/repayment/repayment_schedule_overdue_list_data?orderId=<%=orderId%>&loanId=<%=loanId%>',
            columns: [
                { data: 'dueDate', className: 'center' },
                { data: 'beginCount', className: 'center' },
                { data: 'repaymentAmount', className: 'center' },
                { data: 'principalAmount', className: 'center' },
                { data: 'interestAmount', className: 'center' },
                { data: 'endCount', className: 'center' },
                { data: 'overStatue', className: 'center' }
            ]
        } );
    });
</script>